@extends('layouts.console_main')
@section('resources')
    @parent
    <style type="text/css">
        #container{ width:90%; height: 500px;}
        tfoot{background:lightblue;}
    </style>
    @endsection
@section('content')
        <!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h2>水表管理  >>  子节点详情 </h2>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>子节点用水情况</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="table-responsive">
                            <table id="datatable" class="table table-striped table-bordered">
                                <tr>
                                    <td>编号</td>
                                    <td>名称</td>
                                    <td>使用量</td>
                                    <td>检测间隔天数</td>
                                </tr>
                                <tr>
                                    <td>{{$number}}</td>
                                    <td>{{$name}}</td>
                                    <td>{{$consumption}}</td>
                                    <td>{{$period}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>该父节点下子节点用水情况</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="table-responsive">
                            <table id="datatable" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <td>编号</td>
                                    <td>名称</td>
                                    <td>使用量</td>
                                    <td>检测间隔天数</td>
                                </tr>
                                </thead>
                                <tbody id="child_tbody">

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>合计</th>
                                        <th id="child_count"></th>
                                        <th id="radix_total"></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>地图</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>

                    <div class="x_content">
                        <div class="table-responsive">
                            <div id="container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
        <!--
        <div class="amap-adcontent-body">
            <div class="info-title">高德地图</div>
            <div class="info-content">
                <img src="https://webapi.amap.com/images/amap.jpg">高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br>
                <a target="_blank" href="https://mobile.amap.com/">点击下载高德地图</a>
            </div>
            <div class="amap-info-combo status-origin">
                <table>
                    <tr class="amap-info-tabs"><td class="tab"><i class="tab-icon icon-around"></i>在附近找</td><td class="tab selected"><i class="tab-icon icon-start"></i>这里出发</td>
                    <td class="tab"><i class="tab-icon icon-end"></i>到这里去</td></tr>
                </table>
                <table cellpadding="0">
                    <tr><td class="input-label">终点</td><td><div class="keyword-input"><input class="keyword" type="text"></div></td>
                    <td><div class="search-button hide">搜索</div><div class="nav-button"><span class="nav-icon nav-drive">驾车</span><span class="nav-icon nav-bus">公交</span>
                        <span class="nav-icon nav-walk">步行</span></div></td></tr>
                </table>
            </div>
        </div>
    -->
@endsection
@section('scriptResources')
    @parent
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=a9fe1b184bacd00ecd70365903024419&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script>
        var longitude = parseFloat('{{$longitude}}');
        var latitude = parseFloat('{{$latitude}}');
        var radix = '{{$radix}}';
        var consumption = '{{$consumption}}';
        var lntlatXY = [longitude, latitude];
        var name = '{{$name}}';
        var number = '{{$number}}';
        var map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 13
        });
        marker = new AMap.Marker({  //加点
            map: map,
            position: lntlatXY,
            icon:new AMap.Icon({
                size: new AMap.Size(40, 50),  //图标大小
                image: "http://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
                imageOffset: new AMap.Pixel(0, -60)
            }),
            title:name
        });
        map.setFitView();
        function geocoder_CallBack(data) {
            var address = data.regeocode.formattedAddress; //返回地址描述
            document.getElementById("result").innerHTML = address;
        }
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            marker.setMap(null);
            lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()]
            // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
            console.log(e.lnglat.getLng());
            marker = new AMap.Marker({  //加点
                map: map,
                position: lnglatXY,
                //content: market_content
            });
            map.setFitView();
            $("input[name='longitude']").val(e.lnglat.getLng());
            $("input[name='latitude']").val(e.lnglat.getLat());
        });
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }

        $.ajax({
            url : '/water/child/list',
            data: {
                number:number
            },
            type:'get',
            dataType:'json',
            success:function(data){
                if(data.status == 'success') {
                    var data = data.data;
                    //console.log(data);
                    var length =  data.length;
                    var childHtml = '';
                    var childConsumptionTotal = 0;
                    for(var i=0; i<length; i++) {
                        var list = data[i];
                        //console.log("longitude:" + list.longitude);
                        //console.log("latitude:" + list.latitude);
                        var market_content = '<div><a target="_blank" href="/water/statistic/get?id='+list.id + '" class="color:red;"><img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png"></a></div>';
                        var market1 = new AMap.Marker({  //加点
                            map: map,
                            position: [list.longitude, list.latitude],
                            title:list.name + ":" + list.consumption + "吨",
                            content:market_content,
                        });
                        childConsumptionTotal = parseInt(childConsumptionTotal) + parseInt(list.consumption);
                        childHtml += "<tr>" + "<td>"+list.number+"</td>" +"<td>"+list.name+"</td>"+"<td>"+list.consumption+"</td>"+ "<td>"+list.period+"天</td>"+"</tr>";
                    }
                    $("#child_tbody").html(childHtml);
                    $("#child_count").html(length+"个");
                    if((consumption != 0.00) && (consumption != 0)) {
                        var profitAndLoss = Math.floor((parseInt(consumption) - childConsumptionTotal)/parseInt(consumption) *100 );
                    } else {
                        var profitAndLoss = 0;
                    }
                    $("#radix_total").html(childConsumptionTotal + "   (损益  " + profitAndLoss + "%)");
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    </script>
@endsection

